<!-- 🌟评分 -->
<template>
	<div class="rating flex-center">
		<span v-for="(star, index) in maxRating" :key="index" @click="updateRating(index + 1)">
			<el-icon v-if="isFilled(index)" class="fill-star"><StarFilled /></el-icon>
			<el-icon v-else class="star"><Star /></el-icon>
		</span>
	</div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { StarFilled, Star } from '@element-plus/icons-vue';

const props = defineProps({
	modelValue: Number,
	maxRating: {
		type: Number,
		default: 10,
	},
	showText: {
		type: Boolean,
		default: true,
	},
});

const emit = defineEmits(['update:modelValue']);
const rating = ref(props.modelValue);

const updateRating = (newRating) => {
	rating.value = newRating;
	emit('update:modelValue', newRating);
};

const isFilled = (index) => {
	return index < rating.value;
};

watch(
	() => props.modelValue,
	(newVal) => {
		rating.value = newVal;
	}
);
</script>

<style scoped>
.rating {
	width: 100%;
	margin-top: 5px;
	color: var(--el-color-warning);
}

.star {
	display: inline-block;
	margin-right: 4px;
	font-size: 18px;
	margin-top: 2px;
	vertical-align: top;
}
.fill-star {
	font-size: 22px;
	vertical-align: top;
}
</style>
